<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddMagnifier.component",
  components: {Maptalks},
  setup() {

    //draw image data into a canvas, and clip it by a circle with diameter of size
    const createMagCircle = (imageData, size) => {
      let magImg = document.createElement("canvas");
      let magCircle = document.createElement("canvas");

      magImg.width = magImg.height = magCircle.width = magCircle.height = size;
      magImg.getContext("2d").putImageData(imageData, 0, 0);

      let ctx = magCircle.getContext("2d");
      ctx.beginPath();
      ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI);
      // clip canvas
      ctx.clip();
      ctx.drawImage(magImg, 0, 0);
      return magCircle;
    }

    let mapOnLoadCB = (map) => {
      let mousePosition = null;

      map.on("mousemove", function (e) {
        mousePosition = e.containerPoint;
        map.getRenderer().setToRedraw();
      });

      map.on("mouseout", function () {
        mousePosition = null;
        map.getRenderer().setToRedraw();
      });

      map.on("renderend", function (e) {
        if (!mousePosition) {
          return;
        }
        // map"s canvas context
        let ctx = e.context;
        // radius of magnifier
        let radius = 150;
        let pixelRatio = (window.devicePixelRatio || (window.screen.deviceXDPI / window.screen.logicalXDPI));
        radius *= (pixelRatio > 1 ? 2 : 1);
        let centerX = mousePosition.x * pixelRatio,
            centerY = mousePosition.y * pixelRatio;
        let originX = centerX - radius,
            originY = centerY - radius;
        let size = 2 * radius + 2;
        // manipulate pixel values to magnify
        let sourceData = ctx.getImageData(originX, originY, size, size).data;
        let dest = ctx.createImageData(size, size);
        let destData = dest.data;
        for (let j = 0; j < size; ++j) {
          for (let i = 0; i < size; ++i) {
            let dI = i - radius;
            let dJ = j - radius;
            let dist = Math.sqrt(dI * dI + dJ * dJ);
            let sourceI = i;
            let sourceJ = j;
            if (dist < radius) {
              sourceI = Math.round(radius + dI / 2);
              sourceJ = Math.round(radius + dJ / 2);
            }
            let destOffset = (j * size + i) * 4;
            let sourceOffset = (sourceJ * size + sourceI) * 4;
            destData[destOffset] = sourceData[sourceOffset];
            destData[destOffset + 1] = sourceData[sourceOffset + 1];
            destData[destOffset + 2] = sourceData[sourceOffset + 2];
            destData[destOffset + 3] = sourceData[sourceOffset + 3];
          }
        }
        // draw magnifier"s outline
        ctx.beginPath();
        ctx.strokeStyle = "#bbb";
        ctx.lineWidth = 2;
        ctx.arc(centerX, centerY, radius + 2, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.closePath();

        // draw magnified image and clip it by circle
        ctx.drawImage(createMagCircle(dest, size), centerX - size / 2, centerY - size / 2);
      });


    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>
